<script setup lang="ts">
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import request from "@/utils/request";
import API from "@/api";

const formSize = ref<ComponentSize>("default");
const formRef = ref<FormInstance>();
const action = ref("add");

interface RuleForm {
  categoryId: string;
  name: string;
  sort: string;
  type: string;
}

let form = reactive<RuleForm>({
  categoryId: "",
  name: "",
  sort: "",
  type: "",
});

const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
  type: [{ required: true, message: "请选择分类类型", trigger: "change" }],
  sort: [
    { required: true, message: "请输入排序", trigger: "blur" },
    {
      pattern: /^\d+$/,
      message: "请输入有效的数字",
      trigger: ["change", "blur"],
    },
  ],
});

const emits = defineEmits(["refresh", "update:addClassVisible"]);

const resetForm = () => {
  action.value = "add";
  formRef.value?.resetFields();
  form = reactive<RuleForm>({
    categoryId: "",
    name: "",
    sort: "",
    type: "",
  });
};

const onClose = () => {
  resetForm();
  emits("update:addClassVisible", false);
};

const openEditClass = (editForm: RuleForm) => {
  action.value = "edit";
  Object.assign(form, editForm);
};

const submitForm = (
  formEl: FormInstance | undefined,
  continueType?: string
) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (action.value === "add") {
        request.post(API.saveCategory, form).then((res) => {
          if (res.code === 1) {
            ElMessage.success("分类添加成功!");
            emits("refresh");
            if (continueType === "go") {
              resetForm();
            } else {
              onClose();
            }
          } else {
            ElMessage.error(res.msg);
          }
        });
      } else {
        request.put(API.editCategory, form).then((res) => {
          if (res.code === 1) {
            ElMessage.success("分类修改成功!");
            emits("refresh");
            onClose();
          } else {
            ElMessage.error(res.msg);
          }
        });
      }
    }
  });
};

defineExpose({
  openEditClass,
});
defineComponent({
  name: "AddClass",
});
defineProps({
  addClassVisible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
});
</script>

<template>
  <el-dialog
    :model-value="addClassVisible"
    :title="title"
    width="30%"
    :before-close="onClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="auto"
      :size="formSize"
      status-icon
    >
      <el-form-item label="分类名称:" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入分类名称"
          maxlength="14"
        />
      </el-form-item>
      <el-form-item label="分类类型:" prop="type">
        <el-select v-model="form.type" placeholder="请选择分类类型">
          <el-option label="菜品分类" :value="1" />
          <el-option label="套餐分类" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input v-model="form.sort" type="number" placeholder="请输入排序" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="success" @click="submitForm(formRef)">保存</el-button>
        <el-button
          type="success"
          v-if="action === 'add'"
          @click="submitForm(formRef, 'go')"
        >
          保存并继续添加
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
